<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Swiper缓慢移动的demo</title>
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		body {
			margin: 0;
		}

		h2 {
			font-family: -webkit-pictograph;
			font-size: 30px;
			font-style: italic;
			text-align: center;
		}

		/* .swiper-container {
			padding-bottom: 40px;
		} */

		.swiper-wrapper {}
/* 
		.swiper-slide {
			width: 978px;
			transition-timing-function: linear;
		} */

		/* @media only screen and (max-width:1200px) {
			.swiper-slide {
				width: 770px;
			}
		}

		@media only screen and (max-width:980px) {
			.swiper-slide {
				width: 471px;
			}
		}

		@media only screen and (max-height:480px) {
			.swiper-slide {
				width: 471px;
			}
		} */

		.swiper-slide img {
			width: 100%;
			/* border-radius: 4px; */
		}

		.swiper-slide .title {
			position: absolute;
			transform: rotate(90deg);
			transform-origin: left top;
			left: -3px;
			font-size: 11px;
			color: rgb(102, 102, 102);
		}

		.swiper-button-next,
		.swiper-button-prev {
			width: 86px;
			height: 112px;
			background-size: 86px 112px;
			margin-top: -56px;
			outline: none;
		}

		.swiper-button-next {
			background-image: url(img/cursor-next.png);
		}

		.swiper-button-prev {
			background-image: url(img/cursor-prev.png);
		}

		.swiper-pagination-bullet {
			background: none;
			opacity: 1;
			margin: 0 6px !important;
			width: 9px;
			height: 9px;
			position: relative;
			outline: none;
			vertical-align: middle;
		}

		.swiper-pagination-bullet span {
			width: 3px;
			height: 3px;
			background: #CCC;
			display: block;
			border-radius: 50%;
			margin-top: 3px;
			margin-left: 3px;
		}

		.swiper-pagination-bullet i {
			background: #000;
			height: 1px;
			width: 20px;
			position: absolute;
			top: 4px;
			transform: scaleX(0);
			transform-origin: left;
			z-index: 3;
			transition-timing-function: linear;
		}

		.swiper-pagination-bullet-active span,
		.swiper-pagination-bullet:hover span {
			width: 9px;
			height: 9px;
			margin-top: 0;
			margin-left: 0;
			background: #000;
			position: relative;
			z-index: 1;
		}

		.swiper-pagination-bullet-active i {
			animation: middle 6s;
		}

		.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i {
			animation: first 6s;
		}

		.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i {
			animation: last 6s;
		}

		@keyframes first {
			0% {
				transform: scaleX(0.5);
				left: 0px;
			}

			/*091*/
			100% {
				transform: scaleX(1);
				left: 2px;
			}

			/*0915*/
		}

		@keyframes last {
			0% {
				transform: scaleX(0.7);
				left: -10px;
			}

			/*1090*/
			20% {
				transform: scaleX(0.3);
				left: 2px;
			}

			/*090*/
			100% {
				transform: scaleX(0.3);
				left: 0px;
			}

			/*090*/
		}

		@keyframes middle {
			0% {
				transform: scaleX(0.7);
				left: -10px;
			}

			/*1091*/
			20% {
				transform: scaleX(0.45);
				left: 2px;
			}

			/*092*/
			100% {
				transform: scaleX(1);
				left: 2px;
			}

			/*0913*/
		}
	</style>
</head>

<body>
	<!-- <h2>Traditional,<br>
		Yet Completely New</h2> -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="title">#01 _ The entrance</div><img data-src="img/picture-1.jpg"
					data-srcset="img/picture-1-2x.jpg 2x" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
			<!-- <div class="swiper-slide">
				<div class="title">#02 _ A tatami-matted hallway</div><img data-src="img/picture-2.jpg"
					data-srcset="img/picture-2-2x.jpg 2x" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
			<div class="swiper-slide">
				<div class="title">#03 _ A guestroom</div><img data-src="img/picture-3.jpg"
					data-srcset="img/picture-3-2x.jpg 2x" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
			<div class="swiper-slide">
				<div class="title">#04 _ The ochanoma lounge</div><img data-src="img/picture-4.jpg"
					data-srcset="img/picture-4-2x.jpg 2x" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
			<div class="swiper-slide">
				<div class="title">#05 _ Reception</div><img data-src="img/picture-5.jpg" data-srcset="img/picture-5-2x.jpg 2x"
					class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
			<div class="swiper-slide">
				<div class="title">#06 _ The entrance garden</div><img data-src="img/picture-6.jpg"
					data-srcset="img/picture-6-2x.jpg 2x" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div> -->
		</div>
		<!-- <div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div> -->
	</div>
	<script src="js/swiper.min.js"></script>
	<script>
		var swiper = new Swiper('.swiper-container', {
			autoplay: { // 设置为true启动自动切换，并使用默认的切换设置。
				// delay: 1000, // 自动切换的时间间隔，单位ms。与speed的关系：delay表示两个slide间切换时间，speed代表切换过程中花费的时间。delay是等待时间，speed是运动时间。
				disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
			},
			speed: 60000, // 切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。默认：300
			allowTouchMove: true, // 允许触摸滑动
			lazy: { // 设为true开启图片延迟加载默认值
				loadPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片
				loadPrevNextAmount: 3,  // 设置在延迟加载图片时提前多少个slide
			},
			centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左
			// spaceBetween: 50,
			// direction: 'vertical',

			// slidesOffsetBefore: 400, // 设定slide与左边框的预设偏移量（单位px）
			loop: true,
			// slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量; 或者 'auto'则自动根据slides的宽度来设定数量。
			// slidesPerGroup : 3,
			// loopedSlides: 5,
			freeMode: true, // 普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
			// on: {
			// 	// slideChangeTransitionEnd: function () {
			// 	// 	this.slides.transition(this.params.autoplay.delay + this.params.speed).transform(
			// 	// 		'translate3d(0,-60px, 0)');
			// 	// },
			// 	// slideChangeTransitionStart: function () {
			// 	// 	this.slides.transition(this.params.speed).transform('translate3d(0, 0, 0)');
			// 	// },
			// },
			pagination: {
				// el: '.swiper-pagination',
				// clickable: true,
				// renderBullet: function (index, className) {
				// 	return '<div class="' + className + '"><span></span><i></i></div>';
				// },
			},
			navigation: {
				// nextEl: '.swiper-button-next',
				// prevEl: '.swiper-button-prev',
			},
		});
		window.onresize = function () {
			swiper.update();
		}
	</script>
</body>

</html>